<template>
  <div class="layout-container" :class="{ old: elder }">
    <div class="layout-section layout-section2">
      <top-header :show-elder="false" :auth-check="true" @setElder="setElderByChild"></top-header>

      <apply-notice :user-type="8"></apply-notice>

      <div class="com-contain" style="text-align: center; padding: 20px 0;">
        <van-button type="info" style="width: 90%;" :disabled="!isLegal" @click="realAuth">开始人脸识别</van-button>
        <br/>
        <van-button type="default" style="width: 90%;" @click="$router.push({path:'/list'})">返回列表</van-button>
        <div style="color: #ff0000;">{{ legalMsg }}</div>
      </div>

      <footer-right></footer-right>
    </div>

    <footer-nav :active-index="-1"></footer-nav>
  </div>
</template>

<script>
import FooterNav from "@/components/footerNav";
import FooterRight from "@/components/footerRight";
import TopHeader from "@/components/topHeader";
import applyNotice from "@/components/applyNotice";
import {apiGetInfo, apiSaveAuthId} from "@/api/apply";
import {ajaxUtils, strUtils} from "@/utils/lwUtils";
import {apiGetUser} from "@/api/user";

export default {
  components: {FooterRight, FooterNav, TopHeader, applyNotice},
  data() {
    return {
      elder: false,
      info: {
        unid: "", unitName: "", mobile: "", unitCerno: "", unitLerep: "", createUserid: "", unitCartid: "", usertype: ""
      },
      user: {
        userId: "", userType: "", loginName: "", userName: "", idtype: "", idNum: "", legName: "",
      },
    }
  },
  created() {
    this.info.unid = this.$route.query.unid;
    this.loadInfo(this.info.unid);
    this.getUser();
  },
  methods: {
    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    },
    loadInfo: function (unid) {
      apiGetInfo(unid).then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        this.info = res.data;
      }).catch(err => {
        ajaxUtils.showErr(err);
      });
    },
    getUser: function () {
      apiGetUser().then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        this.user = res.data;
      }).catch(err => {
        ajaxUtils.showErr(err);
      });
    },
    //执行人脸识别操作
    realAuth: function () {
      if (strUtils.isEmpty(this.info.unitLerep) || strUtils.isEmpty(this.info.unitCerno)) {
        this.$eraqDlg.warning("信息不完整，请提交材料申请查询。");
        return;
      }
      ZWJSBridge.onReady(() => {
        ZWJSBridge.zmAuthentication({
          certNo: this.info.unitCerno, certName: this.info.unitLerep
        }).then((data) => {
          if (!data.pass) {
            this.$eraqDlg.alert("未通过人脸识别校验");
            return;
          }
          this.doSaveAuth(data.passId);
        }).catch((error) => {
          this.$eraqDlg.alert("调用人脸识别服务错误：" + error);
        });
      });
    },
    //保存人脸识别校验结果
    doSaveAuth: function (authId) {
      apiSaveAuthId(this.info.unid, authId).then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        //this.isLegal = false;
        //this.legalMsg = "人脸识别操作成功！";
        this.$eraqDlg.alert("人脸识别操作成功");
        this.$router.push({path: "/showInner", query: {unid: this.info.unid, usertype: this.info.usertype}});
      }).catch(err => {
        ajaxUtils.showErr(err);
      });
    },
  },
  computed: {
    isLegal: function () {
      return !strUtils.isEmpty(this.info.unitLerep) && !strUtils.isEmpty(this.info.unitCerno);
    },
    legalMsg: function () {
      return !strUtils.isEmpty(this.info.unitLerep) && !strUtils.isEmpty(this.info.unitCerno) ?
          "人脸识别成功后，将自动跳转至详情页。" : "信息不完整，无法执行人脸识别操作";
    }
  }
}
</script>

<style lang='scss' scoped>
@import "src/css/home";
@import "src/css/jzy";
@import "src/css/detail";

strong {
  color: #ff0000;
}

.com-para {
  line-height: 30px;
}
</style>
